<!-- https://juejin.cn/post/7457758555173896227 -->
<template>
	<!-- #ifndef MP-ALIPAY -->
	<view class="cos-header" :class="{ 'is_fixed': fixed }"
		:style="{ height: height + 'px', backgroundColor: backgroundColor, zIndex: zIndex, color: fontColor }">
		<image :src="backgroundImage" class="nav-bg" mode="scaleToFill" :style="{ height: height + 'px' }"></image>
		<!-- 状态栏占位 -->
		<div :style="{ height: statusBarHeight + 'px' }"></div>
		<!-- 导航栏 -->
		<view class="nav-wrapper" :style="{ height: navBarHeight + 'px' }">
			<!-- 返回按钮 -->
			<view class="nav-back" v-if="isShowLeft" :style="{ width: menuButtonRect.width + 'px' }" @click="handelBackMethod">
				<slot name="left">
					<!-- 支付宝自定义还是有返回按钮 -->
					<template v-if="isShowBack">
					<!-- 	<image v-if="isFirstPage" :src="homeIcon || '../../static/home.svg'" class="img">
						</image>
						<image v-else :src="backIcon || '../../static/prev.svg'" class="img"></image> -->
						
						     <wd-icon 
						          name="thin-arrow-left" 
						          size="32rpx"
								  color="#fff"
						        ></wd-icon>
						
					</template>
				</slot>
			</view>
			<view class="nav-title">
				<slot>
					{{ title }}
				</slot>
			</view>
			<!-- 胶囊位置 -->
			<view class="nav-menu" v-if="isShowRight" :style="{ width: menuButtonRect.width + 'px' }">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'

/**
 * NavBar 自定义导航栏
 * @description 导航栏组件，主要用于头部导航
 * @property {String} title 标题文字
 * @property {String} homeUrl 左侧点击返回主页地址
 * @property {String} homeIcon 左侧主页图标
 * @property {String} backUrl 左侧点击返回地址
 * @property {String} backIcon 左侧返回图标
 * @property {Boolean} fixed = [true|false] 是否固定顶部
 * @property {Number} zIndex = 显示层级
 * @property {String} backgroundColor 导航栏背景颜色
 * @property {String} backgroundImage 导航栏背景图片
 * @property {String} fontColor 图标和文字颜色
 * @property {Boolean} isShowBack 是否显示返回图标
 * @property {Boolean} isShowLeft 是否显示左侧
 * @property {Boolean} isShowRight 是否显示右侧
 * @property {Number} defaultNavBarheight 默认导航栏高度
 * @property {Number} defaultMenuWidth 默认菜单宽度
 * @property {Object} jumpMap 主页跳转方法映射
 */
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	homeUrl: {
		type: String,
		default: '/pages/index/index'
	},
	homeIcon: {
		type: String,
		default: ''
	},
	backUrl: {
		type: String,
		default: ''
	},
	backIcon: {
		type: String,
		default: ''
	},
	fixed: {
		type: Boolean,
		default: false
	},
	zIndex: {
		type: Number,
		default: 99
	},
	backgroundColor: {
		type: String,
		default: '#ff2442'
	},
	backgroundImage: {
		type: String,
		default: ''
	},
	fontColor: {
		type: String,
		default: '#000'
	},
	isShowBack: {
		type: Boolean,
		default: true
	},
	isShowLeft: {
		type: Boolean,
		default: true
	},
	isShowRight: {
		type: Boolean,
		default: true
	},
	defaultNavBarheight: {
		type: Number,
		default: 40
	},
	defaultMenuWidth: {
		type: Number,
		default: 40
	},
	jumpMap: {
		type: Object,
		default: () => ({
			home: '',
			back: ''
		})
	}
})

// 响应式变量
const statusBarHeight = ref(0)
const navBarHeight = ref(props.defaultNavBarheight)
const menuButtonRect = ref({
	width: props.defaultMenuWidth
})
const height = ref(props.defaultNavBarheight)
const isFirstPage = ref(true)

// 方法定义
const setTitle = () => {
	// 针对支付宝进行动态设置
	// #ifdef MP-ALIPAY
	uni.setNavigationBarTitle({
		title: props.title
	});
	// #endif
	// #ifdef H5
	document.title = props.title
	// #endif
}

const getRectInfo = () => {
	// 获取状态栏高度
	const sysInfo = uni.getSystemInfoSync()
	statusBarHeight.value = sysInfo.statusBarHeight
	// 默认高度
	height.value = statusBarHeight.value + props.defaultNavBarheight
	
	// #ifndef APP || H5
	// 判断获取微信小程序胶囊API是否可用 H5出现为true情况无法使用
	if (uni.canIUse('getMenuButtonBoundingClientRect')) {
		// 获取微信小程序胶囊布局位置信息
		menuButtonRect.value = uni.getMenuButtonBoundingClientRect()
		// (胶囊上部高度-状态栏高度)*2 + 胶囊高度 = 导航栏高度（不包含状态栏）
		// 以此保证胶囊位于中间位置，多机型适配
		navBarHeight.value = (menuButtonRect.value.top - sysInfo.statusBarHeight) * 2 + menuButtonRect.value.height
		// 状态栏高度 + 导航栏高度 = 自定义导航栏高度总和
		height.value = statusBarHeight.value + navBarHeight.value
	}
	// #endif
}

const getPageInfo = () => {
	const pages = getCurrentPages()
	isFirstPage.value = pages.length === 1
}

const handelBackMethod=()=>{
	 uni.navigateBack()
}

const handleBack = () => {
	if (!props.isShowBack) return
	
	if (!isFirstPage.value && !props.backUrl) {
		uni.navigateBack({
			delta: 1
		})
		return
	}
	
	const url = isFirstPage.value ? props.homeUrl : props.backUrl
	if (!url) return
	
	const type = isFirstPage.value ? (props.jumpMap.home || '') : (props.jumpMap.back || '')
	if (type) {
		uni[type]({
			url
		})
		return
	}
	
	try {
		uni.navigateTo({
			url
		})
	} catch (error) {
		uni.switchTab({
			url
		})
	}
}

const init = () => {
	getRectInfo()
	getPageInfo()
	setTitle()
}

// 挂载时初始化
onMounted(() => {
	init()
})
</script>

<style>
.cos-header {
	position: relative;
	width: 100vw;
}

.nav-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
}


.is_fixed {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99;
}

.nav-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px;
}

.img {
	width: 20px;
	height: 20px;
	color: #fff;
}

.nav-back {
	flex-shrink: 0;
}

.nav-title {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	color: #fff;
	font-size: 18px;
}

.nav-menu {
	flex-shrink: 0;
}
</style>